<template>
  <div>
    <v-md-editor v-model="editorValue"
                 :disabled-menus="[]"
                 @upload-image="handleUploadImage"
                 ></v-md-editor>
  </div>
</template>

<script>
import axios from 'axios'
import { getToken } from '@/utils/auth'

export default {
  name: 'mdEditor',
  data() {
    return {
      editorValue: this.content,
      server: window.application.minio_host,
    }
  },
  props: {
    // 接收值父组件传递值
    content: String,
    id: String
  },
  methods: {
    // v-md-editor 文件上传
    handleUploadImage(event, insertImage, files) {
      let file = files[0]
      let formData = new FormData()
      formData.append("file", file)

      axios.post(`/adminSever/newsBg/content-photo/${this.id}`, formData, {
        headers: {
          token: getToken(),
        },
        'Content-Type': 'multipart/form-data'
      })
        .then((resp) => {
          if (resp.data.code === 1) {
            this.$notify({
              title: '提示',
              message: "需要控制图片大小时，在链接后添加'{{{width=\"宽度\" height=\"高度\"}}}' 即可控制",
              offset: 150,
              duration: 0
            });
            insertImage({
              url: this.returnUrl(resp.data.data),
              desc: resp.data.data.file_name
            });
          }
        })
        .catch((error) => {
          this.$message.error(error)
        })
    },
    returnUrl(data) {
      return this.server + data.bucket + "/" + data.url
    }
  },
  watch: {
    editorValue: function (newNum, oldNum) {
      // 修改调用者传入的值
      this.$emit('update:content', newNum)
    }
  },
}
</script>

<style>
</style>
